<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        1.字体图标--本质字体 看起来像图片
        先下载在引入css文件 最后调用calss类名  不要丢掉iconfont
        上传svg文件再下载下来
        1.平面转换  位移旋转 缩放
        属性transform
        位移 translate(水平位移,垂直位移)  取值 数字px  百分比
        坐标坐上原则
        括号里面只写一个translateX

        应用 通过定位+transform: translate(-50%,-50%) 将子元素在父元素水平垂直居中

        2.旋转 rotate(deg) 顺时针为正值
        旋转需要配合hover 和过渡查看

        位移和旋转再一个元素上  需要注意css层叠性
     -->
</body>

</html>